<template>
  <home-layout class="home" :active-class.sync="activeClass">
    <!-- 头部导航栏 -->
    <template #header>
      <home-nav-bar :class="activeClass" />
    </template>
    <!-- 轮播图 区域 -->
    <swipe :list="homeSwipes" :default-style="{ display: 'block', width: '100%', height: '205px', background: '#fff' }" />

    <!-- 宫格 区域 -->
    <home-grid :list="homeGrids" style="height: 186px;" />

    <!-- 广告 区域 -->
    <home-advert class="mg-t10" :list="homeAdverts" />

    <!-- 房源列表 区域 -->
    <home-list class="mg-t10" />
  </home-layout>
</template>

<script>
// 页面布局组件
import HomeLayout from '@/views/layout/HomeLayout'
// 首页头部导航栏组件
import HomeNavBar from './components/HomeNavBar'
// 轮播图组件
import Swipe from '@/components/Swipe'
// 轮播宫格组件
import HomeGrid from '@/components/Grid/HomeGrid'
// 轮播广告组件
import HomeAdvert from './components/HomeAdvert'
// 房源列表 组件
import HomeList from './components/HomeList'
import { getHomeSwiper, getHomeGrid, getHomeAdvert } from '@/api/home/index'
export default {
  name: 'Home',
  components: {
    HomeLayout,
    HomeNavBar,
    Swipe,
    HomeGrid,
    HomeAdvert,
    HomeList
  },
  data() {
    return {
      activeClass: '',
      homeSwipes: [], // 轮播图数据
      homeGrids: [], // 轮播宫格数据
      homeAdverts: [] // 广告数据
    }
  },
  created() {
    this.getHomeSwiper()
    this.getHomeGrid()
    this.getHomeAdvert()
  },
  beforeRouteEnter(to, from, next) {
    // 进入之前缓存本组件，解决第一次不缓存列表页的问题
    next((vm) => {
      vm.$store.commit('permission/SET_INCLUDELIST', ['Home'])
    })
  },
  beforeRouteLeave(to, from, next) {
    // 跳转到详情页时缓存当前列表页，反之不缓存
    if (to.path.indexOf('/search/house/index') > -1 || to.path.indexOf('/house/list') > -1) {
      this.$store.commit('permission/SET_INCLUDELIST', ['Home'])
    } else {
      this.$store.commit('permission/SET_INCLUDELIST', [])
      this.$destroy() // 销毁vue实例
    }
    next()
  },
  methods: {
    // 获取轮播图数据
    async getHomeSwiper() {
      try {
        const { data } = await getHomeSwiper()
        this.homeSwipes = data
      } catch (e) {
        console.log(e)
      }
    },
    // 获取宫格数据
    async getHomeGrid() {
      try {
        const { data } = await getHomeGrid()
        this.homeGrids = data
      } catch (e) {
        console.log(e)
      }
    },
    // 获取广告数据
    async getHomeAdvert() {
      try {
        const { data } = await getHomeAdvert()
        this.homeAdverts = data
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style scoped lang="less">
.app-wrapper {
  /deep/ .main-container {
    margin-top: -@nav-bar-height;
  }
}
</style>
